<template>

  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" click @tab-click="handleClick">
          <el-tab-pane label="角色管理" name="first">
            <el-button type="text" @click="xinzeng">+新建角色</el-button>
            <el-table
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                width="120px"
                type="index"
              />
              <el-table-column
                label="角色名称"
                width="240"
                prop="name"
              />
              <el-table-column
                label="描述"
                prop="description"
              />
              <el-table-column
                label="编辑"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="handleEdit(scope.$index, scope.row.id)"
                  >分配权限</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                @current-change="hCurrentChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-dialog :title="isEdit?'编辑角色':'新增角色'" :visible.sync="dialogFormVisible" center @close="hClose">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="活动名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="活动描述" :label-width="formLabelWidth">
            <el-input v-model="form.description" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="addtableData">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>确认删除</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao ">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getRoles, deleteRoles, addRole, updateRole } from '@/api/setting'
export default {
  name: 'Setting',
  data() {
    return {
      tableData: [],
      activeName: 'first',
      pageParams: {
        page: 1, // 查询第一页
        pagesize: 2 // 每页两条  --- 要与pagination中page-size一致
      },
      total: 0, // 总的数据条数
      dialogVisible: false,
      id: null,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        description: ''
      },
      isEdit: false,
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    async loadRoles() {
      try {
        const res = await getRoles(this.pageParams)
        console.log(res)
        this.tableData = res.data.rows
      } catch (err) {
        console.log(err)
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    handleEdit(index, row) {
      console.log(index, row)
      // 用户点击了编辑
      this.isEdit = true
      // 1. 把当前的数据直接给表单
      this.form = { id: row.id, name: row.name, description: row.description }

      // 2. 显示弹层
      this.dialogFormVisible = true
      // console.log(row)
    },
    handleDelete(index, row) {
      // console.log(index, row)
      this.dialogVisible = true
      this.id = row
    },
    // 用户点击了页码
    hCurrentChange(curPage) {
      // alert(curPage)
      // 1. 更新页码
      this.pageParams.page = curPage
      // 2. 重发请求
      this.loadRoles()
    },
    handleClose(doDel) {
      this.$confirm('确认删除？')
        .then(() => {
          console.log('你好啊')
        })
        .catch(() => {})
    }, doDel() {
      console.log('你好啊')
    },
    async deleteTableData(id) {
      try {
        const res = await deleteRoles(id)
        console.log(res)
        // 1. 提示
        // 2. 如果当前表格中只有一条，删除之后自动请求上一页数据
        if (this.roles.length === 1) {
          this.pageParams.page--
          if (this.pageParams.page <= 0) {
            this.pageParams.page = 1
          }
        }
        this.$message.success('删除成功')
        // 2. 重新请求
        this.loadRoles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    quxiao() {
      this.dialogVisible = false
      this.hClose()
    },
    queding() {
      this.deleteTableData(this.id)
      this.dialogVisible = false
    },
    addtableData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.dialogFormVisible = false
            this.bianjiForm()
          } else {
            this.addForm()
            this.dialogFormVisible = false
          }
        } else {
          console.log('error submit!!')
          this.dialogFormVisible = false
          return false
        }
      })
    },
    async addForm() {
      try {
        const res = await addRole(this.form)
        this.loadRoles()
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    async  bianjiForm() {
      try {
        const res = await updateRole(this.form)
        this.loadRoles()
        // this.dialogFormVisible = true
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    xinzeng() {
      this.dialogFormVisible = true
      this.isEdit = false
    },
    hClose() {
      console.log('close...............')
      // 重置表单
      this.form = { // 表单数据项
        name: '',
        description: ''
      }
      this.$refs.form.resetFields()
    },
    cancel() {
      this.dialogFormVisible = false
      this.hClose()
    }

  }
}
</script>

